<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>

    <script src="./js/vue-router_3.0.2.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        header {
            position: fixed;
            top: 0;
            height: 50px;
            background-color: green;
            width: 100%;
            text-align: center;

        }

        header span {
            position: absolute;
            left: 0;
        }

        main {
            padding: 50px 0;
        }

        a {
            color: #333;
        }

        .router-link-exact-active {
            color: #fff;
            background-color: purple;
        }

        footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            height: 50px;
            background-color: pink;
        }

        footer ul li {
            width: 25%;
            float: left;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>

<body>
    <div id='app'>
        <header><span v-if='flag'>《 返回</span>头部</header>
        <main>
            <router-view></router-view>
        </main>
        <footer>
            <ul>
                <li>
                    <router-link to="/wechat/wechat">微信</router-link>
                </li>
                <li>
                    <router-link to="/txl/txl">通讯录</router-link>
                </li>
                <li>
                    <router-link to="/find/find">发现</router-link>
                </li>
                <li>
                    <router-link to="/mine/mine">我的</router-link>
                </li>
            </ul>
        </footer>

    </div>
    <script type='text/javascript'>
        var wechat = {
            template: `<div>微信==={{$route.params.name}}</div>`
        }

        var txl = {
            template: `<div>通讯录==={{$route.params.name}}</div>`
        }

        var find = {
            template: `<div>发现==={{$route.params.name}}</div>`
        }

        var mine = {
            template: `<div>我的==={{$route.params.name}}</div>`
        }

        const router = new VueRouter({
            routes: [
                { path: '/', redirect: '/wechat/wechat' },
                { path: '/wechat/:name', component: wechat },
                { path: '/txl/:name', component: txl },
                { path: '/find/:name', component: find },
                { path: '/mine/:name', component: mine },
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                flag: false
            },
            router,
            watch: {
                "$route.path": function (newVal) {
                    console.log(newVal, 333);
                    if (newVal == '/txl/txl' || newVal == '/find/find') {
                        this.flag = true
                    } else {
                        this.flag = false
                    }

                }
            }
        });
    </script>
</body>

</html>